<template>
	<div>
    <div class="p10">
      <el-row :gutter="20">
        <el-col :span="17">
          <div class="p10 bg-white">
             <div id="mycharts" style="height:260px;"></div>
          </div>
        </el-col>
        <el-col :span="7">
          <el-card class="box-card">
            <template #header>
              <div class="card-header level">
                <div class="left ptb12">卡片名称</div>
                <el-button class="button right" type="text">操作按钮</el-button>
              </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
          <el-card class="box-card mt10">
            <template #header>
             <div class="card-header level">
                <div class="left ptb12">卡片名称</div>
                <el-button class="button right" type="text">操作按钮</el-button>
              </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">

        </el-col>
        <el-col :span="4">

      </el-col>
      <el-col :span="8">

      </el-col>
        <el-col :span="8"></el-col>
      </el-row>


    </div>
	</div>
</template>

<script>
import { defineComponent,onMounted,ref,getCurrentInstance } from "vue";
import * as echarts from 'echarts';
export default defineComponent({
  name: 'Dashboard',
  components:{

  },
  data(){
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return{
      tableData: Array(10).fill(item),
      searchForm:{
        user: '',
        region: ''
      },
      form:{
        name:'11111111111',
        region:''
      },
      dialogFormVisible:false
    }
  },
  setup(){
    const { ctx } = getCurrentInstance();
    const myRef = ref(null);
    const loadEChat = () => {
    const echarts = require('echarts');
    const myChart = echarts.init(document.getElementById('mycharts'));
    myChart.setOption({
          color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
          title: {
              text: '销量统计图'
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          legend: {
              data: ['中国移动', '中国联通', '中国电信', 'Line 4', 'Line 5']
          },
          toolbox: {
              feature: {
                  saveAsImage: {}
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  boundaryGap: false,
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              }
          ],
          yAxis: [
              {
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '中国移动',
                  type: 'line',
                  stack: '总量',
                  smooth: true,
                  lineStyle: {
                      width: 0
                  },
                  showSymbol: false,
                  areaStyle: {
                      opacity: 0.8,
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: 'rgba(128, 255, 165)'
                      }, {
                          offset: 1,
                          color: 'rgba(1, 191, 236)'
                      }])
                  },
                  emphasis: {
                      focus: 'series'
                  },
                  data: [140, 232, 101, 264, 90, 340, 250]
              },
              {
                  name: '中国联通',
                  type: 'line',
                  stack: '总量',
                  smooth: true,
                  lineStyle: {
                      width: 0
                  },
                  showSymbol: false,
                  areaStyle: {
                      opacity: 0.8,
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: 'rgba(0, 221, 255)'
                      }, {
                          offset: 1,
                          color: 'rgba(77, 119, 255)'
                      }])
                  },
                  emphasis: {
                      focus: 'series'
                  },
                  data: [120, 282, 111, 234, 220, 340, 310]
              },
              {
                  name: '中国电信',
                  type: 'line',
                  stack: '总量',
                  smooth: true,
                  lineStyle: {
                      width: 0
                  },
                  showSymbol: false,
                  areaStyle: {
                      opacity: 0.8,
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: 'rgba(55, 162, 255)'
                      }, {
                          offset: 1,
                          color: 'rgba(116, 21, 219)'
                      }])
                  },
                  emphasis: {
                      focus: 'series'
                  },
                  data: [320, 132, 201, 334, 190, 130, 220]
              }
          ]
      });
    }
    onMounted(() => {
      loadEChat();
    });
    return {
      myRef
    };
  },
  methods:{
    onSave(){
      this.dialogFormVisible = true
    },
  }
})
</script>

<style>
</style>
